<template>
    <div style="margin:20px;padding:20px;background-color:#fff;">
        <h3>角色信息填写</h3>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="small" label-position="left">
        <el-form-item label="角色名" prop="name">
            <el-input v-model="form.name" style="width:200px;" placeholder="请填写角色名"></el-input>
        </el-form-item>
        </el-form>
        <h3>权限分配</h3>
        <el-button type="primary" size="small" @click="all_check">一键全选</el-button>
        <el-tree ref="tree" :data="data" node-key="id" default-expand-all :expand-on-click-node="false" show-checkbox @check-change="handleCheckChange">
        <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>
            <i class="el-ali-url" v-if="data.type != 1"></i>
            <i class="el-ali-api" v-else></i>
            {{ data.name }}
            </span>
        </span>
        </el-tree>
        <div style="overflow:hidden">
            <el-button type="primary" @click="onSubmit('form')" size="small" style="float:right;">立即创建</el-button>
        </div>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                form: {
                    name: '',
                },
                rules: { 
                    name: [
                        { required: true, message: '请填写角色名', trigger: 'blur' },
                    ],
                },
                data:[],
                checkList:[],
                maxAll:false,
            }
        },
        mounted(){
            this.getData()
        },
        methods: {
            getData() {
                this.data = []
                this.$axios({
                    url: this.$url.node,
                    method:'get',
                }).then(response=>{
                    if(response.data.result.success){
                        let content = response.data.content
                        for(let value of content){
                            if(value.pid == 0){
                                this.data.push(value)
                            }else{
                                for(let mid of this.data){
                                    if(mid.id == value.pid){
                                        if (!mid.children) {
                                            this.$set(mid, 'children', []);
                                        }
                                        mid.children.push(value)
                                    }else{
                                        if(!mid.children){
                                        }else{
                                            for(let min of mid.children){
                                                if(min.id == value.pid){
                                                    if (!min.children) {
                                                        this.$set(min, 'children', []);
                                                    }
                                                    min.children.push(value)
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }else{
                        this.$notify.error({
                            title: '错误',
                            message: response.data.result.errorMsg
                        });
                    }
                }).catch(error=>{
                    console.log(error);
                })
            },
            onSubmit(form) {
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        this.$axios({
                            url: this.$url.role,
                            method:'post',
                            data:{
                                name:this.form.name,
                                role_node:this.checkList.join(',')
                            },
                        }).then(response=>{
                            if(response.data.result.success){
                                this.$notify({
                                    title: '成功',
                                    message: '添加成功',
                                    type: 'success'
                                });
                            }else{
                                this.$notify.error({
                                    title: '错误',
                                    message: response.data.result.errorMsg
                                });
                            }
                        }).catch(error=>{
                            console.log(error);
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleCheckChange(data, checked, indeterminate){
                let id = data.id
                if(checked && indeterminate == false){
                    if(this.checkList.indexOf(id) == -1){
                        this.checkList.push(id)
                    }
                    if(this.checkList.indexOf(data.pid) == -1){
                        if(data.pid != 0){
                            this.checkList.push(data.pid)
                        }
                    }
                }else if(checked == false && indeterminate == false){
                    let index = this.checkList.indexOf(id)
                    if(index > -1){
                        this.checkList.splice(index,1)
                    }
                    let pindex = this.checkList.indexOf(data.pid)
                    if(pindex > -1){
                        if(data.pid != 0){
                            for(let value of this.data){
                                if(value.id == data.pid){//当前点击的是否是二层菜单
                                    let lock = 0
                                    for(let mid of value.children){
                                        if(this.checkList.indexOf(mid.id) != -1){//如果二层菜单的兄弟级id还在 解锁
                                            lock = 1
                                        }
                                    }
                                    if(lock == 0){
                                        this.checkList.splice(pindex,1)
                                    }
                                }else{
                                    if(value.children){//如果一层菜单存在子集
                                        let mid_lock = 0
                                        for(let mid of value.children){//循环二层菜单
                                            if(mid.id == data.pid){//当前点击是否是三层菜单
                                                let lock = 0
                                                for(let min of mid.children){//先查询三层菜单兄弟级id是否还存在 解锁
                                                    if(this.checkList.indexOf(min.id) != -1){
                                                        lock = 1
                                                    }
                                                }
                                                if(lock == 0){
                                                    this.checkList.splice(pindex,1)//删除二层id
                                                }
                                                
                                            }
                                            if(this.checkList.indexOf(mid.id) != -1){//删除完成后再查询二层id的兄弟级id是否还存在 解锁
                                                mid_lock = 1
                                            }
                                        }
                                        if(mid_lock == 0){//删除一层id
                                            let mindex = this.checkList.indexOf(value.id)
                                            if(mindex > -1){//防止别的一级id干涉删除
                                                this.checkList.splice(mindex,1)
                                            }
                                        }
                                    }
                                }
                            }
                        }
    
                    }
                }else if(checked == false && indeterminate){
                    if(this.checkList.indexOf(id) == -1){
                        this.checkList.push(id)
                    }
                }
            },
            all_check(){
                let option = []
                for(let value of this.data){
                    option.push(value.id)
                }
                this.$refs.tree.setCheckedKeys(option)
            }
        },
    }
</script>

<style scoped>

</style>